<template>
  <com-card>
    <div slot="com_title">
      <el-form :model="goods" :inline="true">
        <el-form-item label="商品名称">
          <el-input v-model="goods.name"></el-input>
        </el-form-item>
         <el-form-item label="商品价格">
          <el-input v-model="goods.price"></el-input>
        </el-form-item>
        <el-form-item label="所属分类">
          <el-select v-model="goods.category" placeholder="请选择菜品">
          <el-option
              label="(冒菜)套餐自选区"
              value="(冒菜)套餐自选区"
            ></el-option>
            <el-option label="撸烤串" value="撸烤串"></el-option>
            <el-option label="满减专区" value="满减专区"></el-option>
            <el-option label="营养适配" value="营养适配"></el-option>
            <el-option label="千万销量" value="千万销量"></el-option>
            <el-option label="炒饭系列" value="炒饭系列"></el-option>
            <el-option label="鲜炒盖饭" value="鲜炒盖饭"></el-option>
            <el-option
              label="收藏门店超值专享"
              value="收藏门店超值专享"
            ></el-option>
            <el-option label="热销榜" value="热销榜"></el-option>
            <el-option label="新品专享" value="新品专享"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="query">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div slot="com_content">

       <el-row>
        <el-table :data="dataSource" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="商品ID">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="商品名称">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="所属分类">
                  <span>{{ props.row.category }}</span>
                </el-form-item>
                <el-form-item label="商品价格">
                  <span>{{ props.row.price }}</span>
                </el-form-item>
                <el-form-item label="商品图片">
                  <span >{{ props.row.price }}</span>
                </el-form-item>
                <el-form-item label="创建时间">
                  <span>{{ props.row.ctime | timeMF }}</span>
                </el-form-item>
                <el-form-item label="商品评价">
                  <span>{{ props.row.rating }}</span>
                </el-form-item>
                <el-form-item label="商品销量">
                  <span>{{ props.row.sellCount }}</span>
                </el-form-item>
                <el-form-item label="商品描述">
                  <span>{{ props.row.goodsDesc }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" prop="name"> </el-table-column>
          <el-table-column label="所属分类" prop="category"> </el-table-column>
          <el-table-column label="商品价格" prop="price"> </el-table-column>
          <el-table-column label="商品图片" prop="imgUrl">
            <template slot-scope="{ row }">
              <img :src="row.imgUrl" class="imgit"/>
            </template>
          </el-table-column>
          <el-table-column label="商品描述" prop="goodsDesc"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <span
                ><el-button type="primary" @click="fn_on(row)"
                  >编辑</el-button
                ></span
              >
              <span
                ><el-button type="danger" @click="fn_del(row.id)"
                  >删除</el-button
                ></span
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="goods.currentPage"
          :page-sizes="[1, 2, 3]"
          :page-size="goods.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-row>
    </div>
  </com-card>
</template>

<script>
import { api_goodslist,api_goodsdel } from "../../api/goodType";
import ComCard from "../../components/comcard";

export default {
  components: {
    ComCard,
  },
  data() {
    return {
      goods: {
        name: "",
        category: "",
        price: "",
        imgUrl: "",
        ctime: "",
        rating: "",
        sellCount: "",
        goodsDesc: "",
         currentPage: 1,
        pageSize: 2,
      },
      //    imgUrl:"",
      total: 0,
      dataSource: [],
    };
  },
  mounted() {
    this.query();
  },

  methods: {
    fn_del(a){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let rst= await api_goodsdel({id:a});
          console.log(rst);
          let {code}=rst;
          if(code==0){
            this.query();
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    handleSizeChange(s) {
      console.log(s);
      this.goods.pageSize = s;
      this.query();
    },
    // 当页码数变化时触发的函数
    handleCurrentChange(c) {
      this.goods.currentPage = c;
      this.query();
    },
    // 定义查询数据的方法
    async query() {
      //  this.imageUrl=`http://localhost:5000/upload/imgs/goods_img/${this.goods.imgUrl}`
      //        this.imgUrl=this.goods.imgUrl;
      let rst = await api_goodslist(this.goods);
      let { data, total } = rst;
      this.dataSource=data;
      this.dataSource.forEach(item => {
        item.imgUrl=`http://localhost:5000/upload/imgs/goods_img/${item.imgUrl}`;
      });
      this.total = total;
      console.log(rst);
    },
  },
};
</script>

<style lang="less" scoped>
.imgit{
  width: 100px;
  height: 100px;
}
</style>
